<template>
    <div id="Financial_Top">
        <div>
            <div>
                <!--        面包屑-->
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>邀请关系</el-breadcrumb-item>
                </el-breadcrumb>
                <!--        面包屑 end-->
                <!--        内容-->
                <el-card>
                    <el-form ref="form" :model="searchForm" label-width="80px" :inline="true" size="small"
                             class="admin_from"
                    >
                        <el-form-item label=""

                        >
                            <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-input v-model="searchForm.one_uid" placeholder="请输入邀请人ID"
                                          :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="" :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''">
                                <el-input v-model="searchForm.uid" placeholder="请输入用户ID"
                                          :class="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'maxWidth':''"></el-input>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="#">
                        </el-table-column>
                        <el-table-column
                                :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'200':''"
                                label="用户信息">
                            <template slot-scope="scope">
                                <div class="img">
                                    <img :src="scope.row.userInfo.avatar" alt="" width="30" height="30">
                                    <div>
                                        <p>{{scope.row.uid}}</p>
                                        <p>{{scope.row.userInfo.nickname}}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'200':''"
                                label="邀请人信息">
                            <template slot-scope="scope">
                                <div class="img">
                                    <img :src="scope.row.oneUserInfo.avatar" alt="" width="30" height="30">
                                    <div>
                                        <p>{{scope.row.one_uid}}</p>
                                        <p>{{scope.row.oneUserInfo.nickname}}</p>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :width="this.$store.state.windowWidth<=this.$store.state.MaxWidth?'200':''"
                                prop="created_at"
                                label="日期">
                        </el-table-column>
                    </el-table>
                    <div class="el-pagination">
                        <el-pagination
                                background
                                @size-change="changeSize"
                                @current-change="changeCurrent"
                                :current-page="params.pagenum"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="params.pagesize"
                                :layout="this.$store.state.paginationLayout"
                                :total="params.totals">
                        </el-pagination>
                    </div>

                </el-card>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Financial_Top",
        data() {
            return {
                params: {
                    pagenum: 1,
                    pagesize: 10,
                    totals: 0,
                },
                searchForm: {
                    uid: '',
                    one_uid: '',
                },
                tableData: [],
                fromTitle: '',
                visible: false,
                imageUrl: ''
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                let data = {
                    page: this.params.pagenum,
                    page_size: this.params.pagesize,
                    uid: this.searchForm.uid,
                    one_uid: this.searchForm.one_uid
                };
                this.$axios.post("admin/agent/index", data).then((res) => {
                    this.params.totals = res.data.count;
                    this.tableData = res.data.list;
                });
            },
            // 每页显示多少条
            changeSize(val) {
                this.params.pagesize = val;
                this.getList();
            },
            // 当前显示的页数
            changeCurrent(val) {
                this.params.pagenum = val;
                this.getList()
            },
            search() {
                this.params.pagenum = 1;
                this.getList();
            }
        }
    }
</script>

<style scoped>
    .img {
        display: flex;
        align-items: center;
    }

    .img > img {
        margin-right: 10px;
    }
</style>